{% extends "common/layout.html" %}
{% block content %}


    <div class="row bg-primary">
        <div class="col-sm-10 col-sm-offset-1">
            <h2>文件信息收集系统</h2>
            <h6>Document and information collection system</h6>
        </div>
    </div>


    <div class="row">
        <div class="col-sm-10 col-lg-offset-1">
            <ol class="breadcrumb" style="background:#ffffff">
                <li><a href="{{ buildUrl('/collect/collectall') }}">首页</a></li>
                <li class="active">{{ collectall.part }}-{{ collectall.name }}</li>
            </ol>
        </div>
    </div>


    {#内容#}
    <div class="col-sm-10 col-lg-offset-1">
        <div class="row">
            <div class="row">
                {% for item in collectindex %}
                    <div class="col-sm-2 col-md-2">
                        <div class="row">
                            <div class="col-sm-8">
                                <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                                        data-target="#exampleModal" data-title="编辑" data-name="{{ item.name }}"
                                        data-id="{{ item.id }}" data-bz="{{ item.bz }}">修改
                                </button>

                                <a type="button" class="btn btn-danger btn-sm"
                                        href="{{ buildUrl('/collect/delete') }}?id={{ item.id }}&type=index&aid={{ item.aid }}">删除
                                </a>
                            </div>
                        </div>
                        <div class="thumbnail"
                             onclick="window.location='{{ buildUrl('/collect/collectdetail') }}?id={{ item.id }}'" ;>
                            <img src="/static/pic/ico/folder.png" alt="...">
                            <div class="caption">
                                <div class="btn-group btn-group-justified " role="group"
                                     aria-label="...">
                                    <div class="btn-group" role="group">
                                        <h4 class="text-center"><strong>{{ item.name }}</strong></h4>
                                        <ul class="list-unstyled">
                                            <li> 创建人员:{{ item.creater.nickname }}</li>
                                            <li> 创建日期:{{ item.created_time }}</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
                <div class="col-sm-2 col-md-2">
                    <button data-toggle="modal" data-target="#exampleModal" style="background: #ffffff;border:0px;"
                            data-target="#exampleModal" data-title="新建" data-name=""
                            data-id="" data-bz="">
                        <img src="/static/pic/ico/add.png" alt="..."
                             style="height: 100px;margin-top: 50px;margin-left: 20px">
                    </button>
                </div>
            </div>
        </div>
        {#分页#}
        {% if pages %}
            <div>
                {% include "common/pagenation.html" %}
            </div>
        {% endif %}
    </div>
    </div>






    {#    模态框#}
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">


            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">分类</h4>
                </div>
                <div class="modal-body">

                    <input type="text" class="invisible" id="id" name="id">


                    <div class="form-group">
                        <label class="control-label">名称:</label>
                        <input class="form-control " name="name" id="name" placeholder="请输入">
                    </div>

                    <div class="form-group">
                        <label class="control-label">备注:</label>
                        <textarea class="form-control" rows="5" id="bz" name="bz"
                                  placeholder="请输入"></textarea>
                    </div>


                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button class="btn btn-primary do-add" type="submit" name="add" id="add">新建分类</button>
                        <button class="btn btn-primary do-updata" type="submit" name="updata" id="updata">更新分类</button>
                    </div>


                </div>
            </div>
        </div>
    </div>



    <script>

        {#编辑赋值#}
        $('#exampleModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget); // Button that triggered the modal
            var id = button.data('id');
            var bz = button.data('bz');
            var name = button.data('name');
            var title = button.data('title');


            var modal = $(this)
            modal.find('.modal-title').text(title + '分类');
            document.getElementById("name").value = name;
            document.getElementById("bz").value = bz;
            document.getElementById("id").value = id;


            if (title == '编辑') {
                document.getElementById("add").style.display = "none";
                document.getElementById("updata").style.display = "";

            } else {
                document.getElementById("updata").style.display = "none";
                document.getElementById("add").style.display = "";
            }


        });
    </script>

    {#更新#}
    <script>
        $(".do-updata").click(function () {
            var btnaction = $(this);
            if (btnaction.hasClass("disable")) {
                common_ops.alert("还没提交上去了，别瞎点")
                return
            }

            var name = $("input[id=name]").val();
            var bz = $("textarea[id=bz]").val();
            var uid = {{ current_user.id }};
            var id = $("input[id=id]").val();
            var aid = {{ collectall.id }};


            $.ajax({
                url: common_ops.buildUrl("/collect/updataindex"),
                type: "POST",
                data: {
                    name: name,
                    bz: bz,
                    uid: uid,
                    id: id,

                },
                dataType: 'json',
                success: function (res) {
                    btnaction.removeClass("disabled");
                    var callback = null;
                    if (res.code == 200) {
                        callback = function () {
                        };
                    }
                    common_ops.alert(res.msg, callback);
                    setTimeout(function () {
                        $('#exampleModal').modal('hide');
                        $(".modal-backdrop.fade").hide();
                        window.location.href = common_ops.buildUrl("/collect/collectindex") + "?id=" + aid;
                        $("#exampleModal").trigger("click");
                    }, 1000)
                }
            });

        });
    </script>

    {#新建#}
    <script>
        $(".do-add").click(function () {
            var btnaction = $(this);
            if (btnaction.hasClass("disable")) {
                common_ops.alert("还没提交上去了，别瞎点")
                return
            }

            var name = $("input[id=name]").val();
            var part = $("select[id=part]").val();
            var bz = $("textarea[id=bz]").val();
            var uid = {{ current_user.id }};
            var aid = {{ collectall.id }};


            $.ajax({
                url: common_ops.buildUrl("/collect/addindex"),
                type: "POST",
                data: {
                    name: name,
                    part: part,
                    uid: uid,
                    aid: aid,
                    bz: bz,
                },
                dataType: 'json',
                success: function (res) {
                    btnaction.removeClass("disabled");
                    var callback = null;
                    if (res.code == 200) {
                        callback = function () {
                        };
                    }
                    common_ops.alert(res.msg, callback);
                    setTimeout(function () {
                        $('#exampleModal').modal('hide');
                        $(".modal-backdrop.fade").hide();
                        window.location.href = common_ops.buildUrl("/collect/collectindex") + "?id=" + aid;
                        $("#exampleModal").trigger("click");
                    }, 1000)

                }
            });

        });
    </script>



{% endblock %}


{% block js %}
    <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
{% endblock %}


